<template>
  <el-tooltip placement="bottom" @click="click">
    <template #title>
      {{ isFullscreen ? '退出全屏' : '切为全屏' }}
    </template>
    <el-icon v-if="isFullscreen"><FullScreen /></el-icon>
    <FullScreen v-else />
  </el-tooltip>
</template>

<script>
import { defineComponent } from 'vue';
import sceenfull from 'screenfull';
import useCurrentInstance from '@/hooks/useCurrentInstance';
import {FullScreen} from "@element-plus/icons-vue";

export default defineComponent({
  name: 'ScreenFull',
  components: {FullScreen},
  setup() {
    const { proxy } = useCurrentInstance();
    const isFullscreen = ref(false);
    function click() {
      if (!sceenfull.isEnabled) {
        proxy.$message.warning('你的浏览器不支持全屏');
        return false;
      }
      sceenfull.toggle();
    }
    function change() {
      isFullscreen.value = sceenfull.isFullscreen;
    }
    function init() {
      if (sceenfull.isEnabled) {
        sceenfull.on('change', change);
      }
    }
    function desttoy() {
      if (sceenfull.isEnabled) {
        sceenfull.off('change', change);
      }
    }
    onMounted(() => {
      init();
    });
    onBeforeUnmount(() => {
      desttoy();
    });
    return {
      isFullscreen,
      click
    };
  }
});
</script>

<style scoped></style>
